<template>
  <!-- 分配角色数据权限对话框 -->
  <el-dialog title="分配数据权限" :visible.sync="visible" width="500px" append-to-body :close-on-click-modal="false" @closed="reset">
    <el-form :model="form" label-width="80px">
      <el-form-item label="角色名称">
        <el-input v-model="form.roleName" :disabled="true"/>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="form.roleKey" :disabled="true"/>
      </el-form-item>
      <el-form-item label="权限范围">
        <el-select v-model="form.dataScope">
          <el-option
            v-for="item in dataScopeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="数据权限" v-show="form.dataScope === '2'">
        <el-tree
          class="tree-border"
          show-checkbox
          :default-expanded-keys="treeExpandData"
          lazy
          :load="loadNode"
          ref="dept"
          node-key="id"
          :check-strictly="true"
          empty-text="加载中，请稍后"
          :props="defaultProps">
          </el-tree>
      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="submitting" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRole, dataScope, roleSelectedDept } from "@/api/system/role";
import { listDept } from "@/api/system/dept";

export default {
  name: "dataPermission",
  data() {
    return {
      roleId: undefined,
      visible: false,
      submitting: false,
      dataScopeOptions: [
        {
          value: "1",
          label: "全部数据权限"
        },
        {
          value: "2",
          label: "所属组织及其下级数据权限"
        },
        {
          value: "3",
          label: "所属部门数据权限"
        },
        {
          value: "4",
          label: "仅本人数据权限"
        }
      ],
      treeExpandData: [],
      selectedDeptIds: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: 'leaf'
      },
      // 表单参数
      form: {
        roleName: undefined,
        roleKey: undefined,
        dataScope: undefined,
        deptIds: []
      }
    }
  },
  methods: {
    init(roleId) {
      this.visible = true;
      this.roleId = roleId;
      this.initData();
    },
    initData() {
      getRole(this.roleId).then(response => {
        this.form = response;
      });
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getDeptTree("0", resolve);
      } else {
        this.getDeptTree(node.data.id, resolve);
        return resolve([]);
      }
    },
    getDeptTree(parentId, resolve) {
      listDept({
        page: false,
        parentId,
        status: "Y"
      }).then(res => {
        resolve(res);
        if (parentId === "0") {
          this.$lodash.forEach(res, item => {
            this.treeExpandData.push(item.id);
          });
        }

        if (this.selectedDeptIds.length > 0) {
          this.$refs.dept.setCheckedKeys(this.selectedDeptIds);
        } else {
          roleSelectedDept(this.roleId).then(res => {
            const deptIds = [];
            this.$lodash.each(res, item => {
              deptIds.push(item.deptId);
            });
            this.selectedDeptIds = deptIds;
            this.$refs.dept.setCheckedKeys(deptIds);
          });
        }
      });
    },
    close() {
      this.visible = false;
    },
    submitForm() {
      if (this.roleId !== undefined) {
        /*if (this.form.dataScope === "2") {
          this.form.deptIds = this.getAllCheckedKeys();
        }*/
        this.submitting = true;
        dataScope(this.roleId, this.form).then(response => {
          this.submitting = false;

          this.msgSuccess("修改成功");
          this.close();
          this.$emit('success');
        }).catch(() => {
          this.submitting = false;
        });
      }
    },
    // 表单重置
    reset() {
      if (this.$refs.dept !== undefined) {
        this.$refs.dept.setCheckedKeys([]);
      }
      this.roleId = undefined;
      this.treeExpandData = [];
      this.form = {
        roleName: undefined,
        roleKey: undefined,
        dataScope: undefined,
        deptIds: []
      };
      this.resetForm("form");
    },
    // 所有菜单节点数据
    getAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.dept.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    }
  }
}
</script>

<style scoped>
  .tree-border {
    max-height: 300px;
    overflow-y: auto;
  }
</style>
